<template>
  <div class="edit-page">
    <div class="page-header">
      <el-button class="back-button" icon="el-icon-back" @click="goback">返回</el-button>
      <div class="page-title">换届信息{{ this.form.id?'编辑':'新增' }}</div>
    </div>
    <div class="page-body">
      <el-form inline label-width="120px">
        <div class="titleStyle">
          <span>选举信息</span>
        </div>
        <el-form-item label="党组织名称">
          <el-input :disabled="true" v-model="form.partyOrgName" size="mini" />
        </el-form-item>
        <el-form-item label="当前届期">
          <el-input v-model="form.currentTerm" size="mini" placeholder="例如：第一届" />
        </el-form-item>
        <el-form-item style="width: calc(100% - 100px);" label="选举方式">
          <el-select v-model="form.electionMethod" size="mini" placeholder="请选择">
            <el-option
              v-for="(item,index) in typeList"
              :key="index"
              :label="item"
              :value="index"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选举应到人数">
          <el-input v-model="form.presentPeopleNum" size="mini" />
        </el-form-item>
        <el-form-item label="选举实到人数">
          <el-input v-model="form.actuallyPresentPeopleNum" size="mini" />
        </el-form-item>
        <el-form-item label="任期开始时间">
          <el-date-picker
            v-model="form.termStartDate"
            size="mini"
            type="date"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="任期结束时间">
          <el-date-picker
            v-model="form.termEndDate"
            size="mini"
            type="date"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div class="titleStyle">
        <span>得票信息</span>
        <el-button type="success" size="mini" @click="add">添加</el-button>
      </div>
      <el-table
        :data="tableData"
      >
        <el-table-column align="center" label="党员姓名">
          <template slot-scope="scope">
            <el-select filterable @change="(val)=>personChange(val,scope.row)" v-model="scope.row.partyMemberInfoMgmtId" size="mini" placeholder="请选择">
              <el-option
                v-for="item in personList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" label="职位级别">
          <template slot-scope="scope">
            <el-input disabled size="mini" v-model="scope.row.positionLevel" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="赞成">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.approve" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="反对">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.isReject" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="弃权">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.abstention" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否当选">
          <template slot-scope="scope">
            <el-select size="mini" v-model="scope.row.elected">
              <el-option
                v-for="(item,index) in electedList"
                :key="index"
                :value="index"
                :label="item"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              style="color:#F56C6C;"
              @click="del(scope.$index)"
            >撤销</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-footer">
      <el-button type="primary" size="mini" @click="submit">保存</el-button>
    </div>
  </div>
</template>
<script>
import { add, edit, queryPersonById, queryPersonList } from '@/api/partyMemberManagement/teamBuilding'
export default {
  data () {
    return {
      form: {},
      typeList: ['不记名投票', '记名投票，线下投票'],
      tableData: [],
      electedList: ['是', '否'],
      personList: []
    }
  },
  methods: {
    init (row) {
      this.getPersonList()
      this.form = { ...row }
      this.tableData = row.memberInfoVOList || []
    },
    getPersonList () {
      queryPersonList().then((res) => {
        this.personList = res?.data || []
      })
    },
    goback () {
      this.form = {}
      this.tableData = []
      this.$emit('goback', false)
    },
    submit () {
      let submitForm = add
      if (this.form.id) {
        submitForm = edit
      }
      delete this.form.memberInfoVOList
      submitForm({ ...this.form, memberInfoDTOList: this.tableData }).then((res) => {
        this.$message.success('保存成功')
        this.form = {}
        this.tableData = []
        this.$emit('goback', true)
      })
    },
    personChange (id, form) {
      queryPersonById({ id }).then((res) => {
        this.$set(form, 'partyMemberName', res?.data?.name)
        this.$set(form, 'positionLevel', res?.data?.positionLevelName)
        // this.form.partyMemberInfoMgmtId = res?.data?.id
        // this.form.partyMemberName = res?.data?.name
        // this.form.partyOrgName = res?.data?.branchName
        // this.form.partyPositionsName = res?.data?.partyPositionsName
      })
    },
    add () {
      const obj = {
        partyMemberInfoMgmtId: '',
        partyMemberName: '',
        positionLevel: '',
        approve: '',
        isReject: '',
        abstention: ''
      }
      this.tableData.unshift(obj)
    },
    del (index) {
      const arr = JSON.parse(JSON.stringify(this.tableData))
      arr.splice(index, 1)
      this.tableData = arr
    }
  }
}
</script>
<style scoped lang="scss">
  .page-header {
    display: flex;
    height: 60px;
    align-items: center;
    border-bottom: 1px solid #ddd;
    .back-button {
      margin-right: 16px;
    }
    .page-title {
      font-size: 18px;
      font-weight: 600;
    }
  }
  .page-body {
    height: calc(100vh - 190px);
    overflow-y: auto;
    .el-form-item {
      width: calc(50% - 24px);
      ::v-deep .el-input__inner {
        width: 300px;
      }
    }
    .titleStyle {
      font-weight: 600;
      height: 35px;
      line-height: 35px;
      padding-left: 10px;
      padding-right: 10px;
      margin-bottom: 8px;
      background-color: #d8eff9;
      display: flex;
      justify-content: space-between;
    }
  }
  .page-footer {
    height: 60px;
    text-align: center;
    line-height: 60px;
  }
</style>
